<template>
  <div>
    <el-popover placement="top" v-model="desc.visible">
      <div style="padding:4px;">
        <el-date-picker
          v-model="desc.data"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="desc.visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="handel">确定</el-button>
      </div>
      <el-button size="small" slot="reference">{{desc.title}}</el-button>
    </el-popover>
  </div>
</template>
<script>
import utils from '@/utils';
import { mapActions } from 'vuex';
export default {
  name: 'popRange',
  data() {
    return {
    };
  },
  props: ['desc'],
  methods: {
    handel() {
      this.desc.visible = false;
      console.log(this.desc.data);
      if (!this.desc.data || this.desc.data.length === 0) {
        return;
      }
      let obj = {
        start: utils.getTimeString(this.desc.data[0]),
        end: utils.getTimeString(this.desc.data[1])
      };
      this.desc.data = null;
      this.$emit('output', { key: this.desc.title, value: obj.start + '-' + obj.end });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
